<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态与动态编码安全分析器</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }

       .issue {
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

       .issue:hover {
            background-color: #f0f0f0;
        }

       .issue-warning {
            background-color: #fff3cd;
            color: #856404;
        }

       .issue-danger {
            background-color: #f8d7da;
            color: #721c24;
        }

       .custom-file-button {
            background-color: #dc3545;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .custom-file-button:hover {
            background-color: #c82333;
        }
    </style>
</head>

<body class="bg-gray-100 flex flex-col min-h-screen">
    <header class="bg-blue-600 text-white p-4">
        <h1 class="text-2xl font-bold">静态与动态编码安全分析器</h1>
    </header>
    <main class="flex-grow p-8">
        <div class="bg-white p-6 rounded-lg shadow-md max-w-2xl mx-auto">
            <h2 class="text-xl font-bold mb-4">上传代码文件进行安全分析</h2>
            <p class="text-gray-600 mb-2">支持的文件类型：.py、.java、.c</p>
            <button id="customFileButton" class="custom-file-button">
                <i class="fa-solid fa-file-upload"></i> 选择代码文件
            </button>
            <span id="selectedFileName" class="ml-2 text-gray-600"></span>
            <div class="mt-4">
                <button id="analyzeButton"
                    class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
                    <i class="fa-solid fa-magnifying-glass"></i> 分析代码
                </button>
            </div>
            <div id="result" class="mt-4">
                <p id="loading" class="hidden text-gray-600">
                    <i class="fa-solid fa-spinner fa-spin"></i> 分析中，请稍候...
                </p>
                <div id="issues" class="mt-4"></div>
            </div>
            <div id="history" class="mt-8">
                <h3 class="text-lg font-bold mb-2">分析历史记录</h3>
                <ul id="historyList"></ul>
            </div>
        </div>
    </main>
    <footer class="bg-gray-200 text-gray-600 p-4 text-center">
        &copy; 2025 静态与动态编码安全分析器
    </footer>
    <script>
        const analyzeButton = document.getElementById('analyzeButton');
        const codeFile = document.getElementById('codeFile');
        const customFileButton = document.getElementById('customFileButton');
        const selectedFileName = document.getElementById('selectedFileName');
        const loading = document.getElementById('loading');
        const issuesDiv = document.getElementById('issues');
        const historyList = document.getElementById('historyList');

        customFileButton.addEventListener('click', () => {
            codeFile.click();
        });

        codeFile.addEventListener('change', () => {
            const file = codeFile.files[0];
            if (file) {
                selectedFileName.textContent = `已选择文件: ${file.name}`;
            } else {
                selectedFileName.textContent = '';
            }
        });

        analyzeButton.addEventListener('click', async () => {
            const file = codeFile.files[0];
            if (!file) {
                alert('请选择一个代码文件');
                return;
            }
            loading.classList.remove('hidden');
            issuesDiv.innerHTML = '';

            const reader = new FileReader();
            reader.onload = async (event) => {
                const code = event.target.result;
                const formData = new FormData();
                formData.append('code', code);
                formData.append('filename', file.name);

                try {
                    const response = await fetch('/analyze', {
                        method: 'POST',
                        body: formData
                    });
                    const result = await response.json();
                    loading.classList.add('hidden');

                    if (result.length > 0) {
                        result.forEach((issue) => {
                            const listItem = document.createElement('div');
                            listItem.classList.add('issue');
                            if (issue.includes('错误') || issue.includes('不安全')) {
                                listItem.classList.add('issue-danger');
                            } else {
                                listItem.classList.add('issue-warning');
                            }
                            listItem.textContent = issue;
                            issuesDiv.appendChild(listItem);
                        });
                    } else {
                        const successMessage = document.createElement('p');
                        successMessage.textContent = '未发现安全问题。';
                        successMessage.classList.add('issue', 'bg-green-100', 'text-green-700');
                        issuesDiv.appendChild(successMessage);
                    }

                    const historyItem = document.createElement('li');
                    historyItem.textContent = `${file.name}: ${result.length} 个问题`;
                    historyList.prepend(historyItem);
                } catch (error) {
                    loading.classList.add('hidden');
                    const errorMessage = document.createElement('p');
                    errorMessage.textContent = `发生错误: ${error.message}`;
                    errorMessage.classList.add('issue', 'issue-danger');
                    issuesDiv.appendChild(errorMessage);
                }
            };
            reader.readAsText(file);
        });
    </script>
</body>

</html>